<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<ul class="layui-nav layui-nav-tree" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<table id="demo" lay-filter="test"></table>


<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use(['table','element'], function(){
        var table = layui.table;

        // 为表格填充数据
        table.render({
            elem: '#demo',
            height: 312,
            // url: '/json/table.json',
            url: '/layui/test1',

            cols: [[ //表头
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'username', width:80, title: '用户名'}
                ,{field:'sex', width:80, title: '性别', sort: true}
                ,{field:'city',width:80,  title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
                ,{field:'score',width:80, title: '评分', sort: true}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}
            ]],
             page: true, //开启分页
            toolbar:true,
            // page:{limit:1//每页显示1条
            //     ,limits:[1,2,3] //可选每页条数
            //     ,first: '首页' //首页显示文字，默认显示页号
            //     ,last: '尾页'
            //     ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
            //     ,next: '<i class="layui-icon layui-icon-next"></i>'
            //     ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            // },

        })

        table.on('tool(test)',function (obj){
            var data = obj.data; //获得当前行数据
            console.log(data);
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent=== 'del'){
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            }else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                // 同步更新缓存对应的值
                obj.update({
                    username: 'shine001',
                    city: '北京',
                    sex:'女',
                    score:99});
            }
        });

    })
</script>
</body>
</html>